<template>
  <div id="SecondaryAttributes">
    <el-row :gutter="20">
      <el-col :span="6" v-for="category in categories" :key="category.id">
        <el-card>
          <div slot="header">{{ category.name }}</div>
          <div>
            <el-button icon="el-icon-edit" @click="editCategory(category)"></el-button>
            <el-button icon="el-icon-delete" @click="deleteCategory(category)"></el-button>
             <el-button type="primary" @click="addAttribute(category)">新增属性</el-button>
             <el-dialog
  title="新增属性"
  :visible.sync="dialogVisibled"
  width="30%">
  <el-form>
    <el-form-item label="名称" >
      <el-input ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibled = false">关闭</el-button>
    <el-button type="primary" @click="saveAttribute">保存</el-button>
  </div>
</el-dialog>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-button type="primary" @click="addCategory"> 新增分类</el-button>
    <el-dialog
  title="新增分类"
  :visible.sync="dialogVisibledd"
  width="30%">
  <el-form>
    <el-form-item label="名称" >
      <el-input ></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibled = false">关闭</el-button>
    <el-button type="primary" @click="saveCategary">保存</el-button>
  </div>
</el-dialog>
    <el-select v-model="selectedCategory" @change="handleCategoryChange">
      <el-option label="颜色" value="color"></el-option>
      <el-option label="品" value="brand"></el-option>
      <el-option label="规格" value="specification"></el-option>
      <el-option label="尺码" value="size"></el-option>
    </el-select>
    
    <el-table :data="attributes">
      <el-table-column prop="name" label="属性"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-edit" @click="editAttribute(scope.row)"></el-button>
           <el-dialog
      title="修改属性"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form>
        <el-form-item label="名称" >
          <el-input v-model="currentAttribute.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveAttribute">确定</el-button>
      </div>
    </el-dialog>
          <el-button icon="el-icon-delete" @click="deleteAttribute(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'SecondaryAttributes',
  data() {
    return {
        dialogVisible: false,
     // 控制对话框显示的属性
      dialogVisibled: false,
      dialogVisibledd: false,
      categories: [
        { id: 1, name: '颜色' },
        { id: 2, name: '品' },
        { id: 3, name: '规格' },
        { id: 4, name: '尺码' }
      ],
      selectedCategory: '',
      attributes: [
        { name: '红' },
        { name: '绿' },
        { name: '蓝' }
      ],
       currentAttribute: {},
    };
  },
  methods: {
  saveAttribute() {
  if (this.currentAttribute.id) {
    // 编辑操作
    // 更新现有属性的逻辑
  } else {
    // 新增操作
    this.currentCategory.attributes.push({ ...this.currentAttribute });
    this.currentAttribute = { name: '' }; // 重置表单
  }
  this.dialogVisibled = false; // 关闭对话框
},
addAttribute(category) {
  this.currentCategory = category; // 设置当前分类
  this.currentAttribute = { name: '' }; // 初始化新属性
  this.dialogVisibled = true; // 显示对话框
},
saveCategary() {
    this.dialogVisibled = false;
},
    editCategory(category) {
      // 编辑分类逻辑
    },
    deleteCategory(category) {
      // 删除分类逻辑
    },
    addCategory() {
        this.dialogVisibledd = true;
      // 新增分类逻辑
    },
    editAttribute(attribute) {
  this.currentAttribute = Object.assign({}, attribute); // 复制当前属性
  this.dialogVisible = true; // 显示对话框
},
    handleCategoryChange(value) {
      // 根据选择的分类更新属性列表
      if (value === 'color') {
        this.attributes = [
          { name: '红' },
          { name: '绿' },
          { name: '蓝' }
        ];
      } else {
        this.attributes = []; // 其他分类的属性
      }
    },
  }
};
</script>

<style scoped>
/* 添加一些样式以适应布局 */
</style>